<template>
	<view class=" bg">
		<view class="" style="position: relative;">
			<u-field v-model="info.name" label="收件人" input-align="right" placeholder="请填写昵称"
				style="background-color: #FFF;">
			</u-field>
			<u-field v-model="info.phone" label="手机号" class="" input-align="right" style="background-color: #FFF;">
			</u-field>
			<u-field label="所在地区" class="mt-20" input-align="right" v-model="region" style="background-color: #FFF;" :disabled="true"
				right-icon='arrow-right' @tap="openPicker()">
			</u-field>
			<view>
			<lotus-address v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"></lotus-address>

			</view>

			<u-field type='textarea' label="详细地址" input-align="right" v-model="address" style="background-color: #FFF;">
			</u-field>
			<view class="ouaccount" @click="submitUser">
				<view class="ouaccount_text">
					保存
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import lotusAddress from "../../components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue";
	import {
		upload
	} from '../../common/common.js'
	export default {
		components: {
			"lotus-address": lotusAddress
		},
		data() {
			return {
				lotusAddressData: {
					visible: false,
					provinceName: '',
					cityName: '',
					townName: '',
				},
				region: '',
				show: false,
				list: [],
				address: '',
				txt: '选择地址',
				userInfo: {
					head_image: '',
					wallet_address: ""
				},
				phonenums: "",
				con: '',
				info: {},
				province: '',
				city: '',
				area: '',
				code:[],
				
			}
		},
		onShow() {
			this.init();
		},
		methods: {
			//打开picker
			openPicker() {
				this.lotusAddressData.visible = true;
				this.lotusAddressData.provinceName = '广东省';
				this.lotusAddressData.cityName = '广州市';
				this.lotusAddressData.townName = '白云区';
			},
			//回传已选的省市区的值
			choseValue(res) {
				//res数据源包括已选省市区与省市区code
				console.log(res);
				this.lotusAddressData.visible = res.visible; //visible为显示与关闭组件标识true显示false隐藏
				//res.isChose = 1省市区已选 res.isChose = 0;未选
				if (res.isChose) {
					this.lotusAddressData.provinceName = res.province; //省
					this.lotusAddressData.cityName = res.city; //市
					this.lotusAddressData.townName = res.town; //区
					this.region = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
					
					this.code.cityCode=res.cityCode
					this.code.provinceCode=res.provinceCode
					this.code.townCode=res.townCode
					console.log(this.code)
				}
			},
			init() {
				// this.$http('api/user/userInfo').then(res => {
				// 	// console.log(res.wallet_address);
				// 	this.info = res;
				// 	console.log(this.info.phone);
				// 	// console.log(this.info.head_image)
				// })
				this.$http('api/user/userAreaInfo').then(res => {
					
					this.region=`${res.address.province} ${res.address.area} ${res.address.city}`
					console.log(res.address.id)
					if(res.address.id<=0){
						this.region=''
					}
					this.info = res.address
					console.log(this.info)
					this.address=res.address.address
				})
			},

			// 保存按钮
			submitUser() {
				// console.log(this.lotusAddressData.provinceName)
				// console.log(this.lotusAddressData.cityName)
				// console.log(this.lotusAddressData.townName)
				if(this.lotusAddressData.provinceName == ''){
					// console.log(this.info.province,this.info.area,this.info.city)
					this.lotusAddressData.provinceName=this.info.province
					this.lotusAddressData.cityName=this.info.area
					this.lotusAddressData.townName=this.info.city
				}
				if(!this.info.name){
					uni.showToast({
						icon:"none",
						title: "收货人不能为空!"
					})
				}else if(!this.info.phone){
					uni.showToast({
						icon:"none",
						title: "手机号不正确!"
					})
				}else if(this.lotusAddressData.provinceName == (''||undefined) || this.lotusAddressData.cityName == (''||undefined) || this.lotusAddressData.townName == (''||undefined)){
					uni.showToast({
						icon:"none",
						title: "省份信息错误请选择!"
					})
				}else if(!this.address){
					uni.showToast({
						icon:"none",
						title: "详细地址不能为空!"
					})
				}else{
					this.$http('api/user/editArea', {
						name: this.info.name,
						phone: this.info.phone,
						// province: this.code.provinceCode,
						// city: this.code.cityCode,
						// area: '',
						province: this.lotusAddressData.provinceName,
						city: this.lotusAddressData.cityName,
						area: this.lotusAddressData.townName,
						address: this.address,
					}, "POST").then(res => {
						console.log(res)
						uni.showToast({
							title: "修改成功!"
						})
						
						// if(res.code==1){
						// 	uni.showToast({
						// 		title: "修改成功!"
						// 	})
						// 	uni.navigateTo({
						// 		url:'./editUser'
						// 	})
						// }
						
					})
				}
				
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #FAFAFA;
	}

	.u-field {
		// color: #fff;
	}

	.ouaccount {
		width: 90%;
		height: 100rpx;
		background-image: linear-gradient(to right, #606060, #2B2B2B);
		border-radius: 20rpx;
		position: fixed;
		bottom: 2%;
		left: 5%;

		.ouaccount_text {
			color: #FFF;
			text-align: center;
			line-height: 100rpx;
			font-size: 24rpx;
			font-weight: 600;
		}
	}
</style>
